<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>创建项目</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-form ref="ruleForm" :model="project" :rules="rules" label-width="120px">
      <el-form-item label="项目名称" prop="proName">
        <el-input name="proName" v-model="project.proName" style="width: 80%;" />
      </el-form-item>
      <el-form-item label="项目描述" prop="proDescribe">
        <el-input v-model="project.proDescribe" type="textarea" :rows="4" style="width: 80%;"/>
      </el-form-item>
      <el-form-item label="选择项目组" prop="teamId">
        <el-select v-model="project.teamId" placeholder="请选择项目组">
          <el-option
                  v-for="item in teamList"
                  :key="item.id"
                  :label="item.teamName"
                  :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开启时间" required >
        <el-col  :span="11" prop="startTime">
          <el-date-picker v-model="project.startTime"
                          value-format="yyyy-MM-dd" type="date" placeholder="开始时间"
                          style="width: 35%;" />
        </el-col>
      </el-form-item>
      <el-form-item label="结束时间" required >
        <el-col :span="11"  prop="endTime">
          <el-date-picker v-model="project.endTime"
                          value-format="yyyy-MM-dd" type="date" placeholder="结束时间"
                          style="width: 35%;"/>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">创建项目</el-button>
        <el-button style="margin: 0 40px;" @click="onCancel()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  let validateStartTime = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('请输入活动开始时间'))
    } else {
      if (new Date(this.ruleForm.startTime).getTime() <= new Date().getTime()) {
        callback(new Error('活动开始时间必须大于当前时间！'))
      } else {
        callback()
      }
    }
  }
  let validateEndTime = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('请输入活动结束时间'))
    } else {
      if (
              new Date(this.ruleForm.startTime).getTime() >=
              new Date(this.ruleForm.endTime).getTime()
      ) {
        callback(new Error('活动结束时间必须大于活动开始时间！'))
      } else {
        callback()
      }
    }
  }
  export default {
    data() {
      return {
        teamList: [],
        project: {
          proName: '',
          proDescribe: '',
          teamId: 1,
          startTime: '',
          endTime: '',
        },
        rules: {
          proName: [
            {required: true, message: '请输入项目名称', trigger: 'blur'},
            {min: 4, max: 50, message: '长度在 4 到 50 个字符', trigger: 'blur'}
          ],
          proDescribe: [
            {required: true, message: '请输入项目描述信息', trigger: 'blur'},
            {min: 0, max: 500, message: '长度在 0 到 500 个字符', trigger: 'blur'}
          ],
          teamId: [
            {required: true, message: '请输入项目描述信息', trigger: 'blur'}
          ],
          startTime: [
            {message: '请选择项目开始时间', trigger: 'blur',validate: validateStartTime}

          ],
          endTime: [
            {message: '请选择项目预期结束时间', trigger: 'blur', validate: validateEndTime}
          ]
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url = 'http://localhost:8989/projects/createProject';
            this.project.startTime = this.project.startTime + " 00:00:00";
            this.project.endTime = this.project.endTime + " 00:00:00";
            console.log('startTime = ' + this.project.startTime);
            console.log('endTime = ' + this.project.endTime);
            let formData = this.qs.stringify(this.project, {arrayFormat: 'repeat'});
            console.log('formData = ' + formData);
            this.axios.post(url, formData).then((response) => {
              let responseBody = response.data;
              console.log('responseBody = ');
              console.log(responseBody);
              if (responseBody.state == 20000) {
                this.$message({
                  message: '创建项目成功！',
                  type: 'success'
                });
              } else {
                this.$message.error(responseBody.message);
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      onCancel() {
        this.$message({
          message: 'cancel!',
          type: 'warning'
        })
      },
      loadTeamList() {
        console.log('loadTeamList');
        let url = 'http://localhost:9878/teams';//'http://localhost:8989/teams/simpleTeamList'
        console.log('url = ' + url);
        this.axios.get(url).then((response) => {
          let responseBody = response.data;
          this.teamList = responseBody.data;
        });
      },
    },
    mounted() {
      this.loadTeamList();
    }
  }
</script>

<style scoped>
  .line{
    text-align: center;
  }
</style>